<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名：<input type="text" value="张三"> <br>
    密码：  <input type="password" value="666"> <br>
    性别：  <input type="radio" name="sex" id="F" value="男">男
            <input type="radio" name="sex" id="M" value="女" checked>女 <br>
    爱好： 
          唱歌 <input type="checkbox" name="hobby" id="" value="唱歌"> 
          跳舞   <input type="checkbox" name="hobby" id="" value="跳舞" checked><br>
    班级：
   <select name="classname" id="">
      <option value="1班">1班</option>
      <option value="2班">2班</option>
      <option value="3班">3班</option>
      <option value="4班">4班</option>
    </select> <br>
    <button>点击</button>
    <script>
      // 1. 文本输入框 值和类型
      const ipt =document.querySelector(`input`)
      console.log(ipt.value);
  
      // 2. 密码输入框
     document.querySelector(`[type ="password"]`).type='button'
      // 3. 单选框     
      // 3.1 checked属性 修改选中状态
     document.querySelectorAll(`[type ="radio"]`)[0].check =true

      // 3.2 那如何获取选中状态的对象
         
      // 4. 复选框
      const box =document.querySelectorAll('[type ="checkbox"]')
      for (let i = 0; i < box.length; i++) {      
        box[i].check =true  
      }    
      // 5. 下拉框
     
  
      // 6. 按钮 禁用与启用
      
      
  
    </script>
</body>
</html>